// this is where we put theme specific style
body
{
	background-color: #FFF;
	background: url(../images/stripes.png) top left repeat;
	padding-bottom: 1px;

	.template-wrapper
	{
		.template-page
		{
			// when not mobile device
			@media (min-width:830px)
			{
				margin: 50px;
				box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.3);
			}
		
			a 
			{ 
				color: #18C047; 

				&:hover { color: #05AD34; }
			}

			.template-header
			{
				background-color: #18C047;
				padding-top: 20px;
				padding-bottom: 10px;
				color: #D7F1DF;
			
				.template-header-menu
				{
					margin-bottom: 20px;

					.nav
					{
						li
						{
							a 
							{ 
								color: #18C047; 
								border-radius: 2px;
								background-color: #fff;
							}

							&:hover
							{
								a 
								{ 
									color: #fff; 
									background-color: #3BCE64;
								}
							}

							&.active
							{	
								a 
								{ 
									color: #fff; 
									background-color: #3BCE64;
								}

								&:hover
								{
									a 
									{ 
										color: #fff; 
										background-color: #3BCE64;
									}
								}
							}
						}
					}
				}
			}

			.template-main
			{
				padding-top: 20px;
				padding-bottom: 20px;
				background-color: #FFF;

				.nav
				{
					li
					{
						a 
						{ 
							color: #18C047; 
							border-radius: 2px;
						}

						&:hover
						{
							a 
							{ 
								color: #fff; 
								background-color: #3BCE64;
							}
						}

						&.active
						{	
							a 
							{ 
								color: #fff; 
								background-color: #18C047;
							}

							&:hover
							{
								a 
								{ 
									color: #fff; 
									background-color: #3BCE64;
								}
							}
						}
					}
				}
			}

			.template-footer
			{
				padding-top: 20px;
				background-color: #FFF;
				border-top: 1px solid #E2E2E2;

				.template-footer-menu
				{
					ul
					{
						margin: 0px;
						padding: 0px;
						list-style-type: none;
					
						li
						{
							float: left;
							margin-bottom: 20px;

							a
							{
								margin-right: 20px;
								color: #18C047;
							}

							&:hover
							{
								a 
								{ 
									color: #18C047;
									background-color: transparent;
								}
							}

							&.active
							{	
								a 
								{ 
									color: #18C047;
									background-color: transparent;
								}

								&:hover
								{
									a 
									{ 
										color: #18C047;
										background-color: transparent;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}